<template>
  <div class="four">
    <div class="main">
      <b-tag
        class="tag-item"
        v-for="(item, index) in tagList"
        :key="index"
        closable
        @click="itemClick(index)"
        >{{ item }}</b-tag
      >
      <input
        v-model.trim="value"
        v-show="isShow"
        ref="input"
        class="input"
        @keydown.enter="handleEnter"
        placeholder="请输入歌曲名"
        @blur="handleBlur"
      />

      <b-button
        class="tag-button"
        type="info"
        size="small"
        height="28px"
        @click="handleClick"
        v-show="isBtn"
      >
        + 添加歌曲</b-button
      >
    </div>
  </div>
</template>
<script>
import store from "../../../store/index";
export default {
  data() {
    return {
      tagList: [],
      value: "",
      isShow: false,
      isBtn: true,
      ShufflePlaybackSongArr:store.state.songList,
    };
  },
  created() {
    function randomsort() {
      return Math.random() > 0.5 ? -1 : 1;
    }
    this.ShufflePlaybackSongArr.sort(randomsort);
    for (let i = 0; i < this.ShufflePlaybackSongArr.length; i++) {
      this.tagList.push(this.ShufflePlaybackSongArr[i]);
    }
    store.commit("changeSongList", this.tagList);
  },
  methods: {
    handleClick() {
      this.isShow = true;
      this.isBtn = false;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleEnter() {
      let str = this.value;
      this.value = "";
      this.isShow = false;
      this.isBtn = true;
      if (str !== "") {
        this.tagList.push(str);
      }
      store.commit("changeSongList", this.tagList);
    },
    handleBlur() {
      this.handleEnter();
    },
    itemClick(index){
      this.tagList[index].splice(index,1)
    }
  },
};
</script>
<style scoped>
.four {
  text-align: left;
  margin-left: 20px;
}
.tag-item {
  margin: 10px 10px 0px 0;
}
.input {
  background-color: transparent;
  outline: none;
  color: white;
  border: 1px solid #eee;
  width: 180px;
  height: 25px;
  padding: 0 10px;
}
.input::placeholder {
  font-size: 12px;
  color: rgba(240, 248, 255, 0.568);
}
.main {
  height: 205px;
  overflow: scroll;
}
.main::-webkit-scrollbar {
  display: none;
}
</style>